<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
<div id="app">
	<div>
		<input type="text" v-focus v-color="'red'">
	</div>
	<p>{{ msg | msgFormat('疯狂', '嘻哈') | test }}</p>
	<h1>{{ curDate | dateFormat }}</h1>
	<p><input type="text" @keyup.f2="setCurDate"></p>
	<p><input type="text" @keyup.112="setCurDate"></p>
	<span v-fontsize="18" v-fontweight="'bold'">{{ msg }}</span>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
	Vue.filter('msgFormat', function(msg, arg, arg2) {
		return msg.replace(/单纯/g, arg + arg2)
	})
	Vue.filter('test', function(msg){
		return msg + '+++++++'
	})
	Vue.filter('dateFormat', function(dateStr, pattern=""){
		var dt = new Date(dateStr)
		return `${dt.getFullYear()}-${dt.getMonth()+1}-${dt.getDate()}`
	})
	Vue.directive('focus', {
		inserted:function(el){
			el.focus()
			// 和JS行为有关的操作，最好在 inserted 中去执行，放置 JS 不生效
		}
	})
	Vue.directive('color', {
		bind:function(el,binging){
			console.log(binging)
			el.style.color = binging.value
			// 和样式相关的操作，一般都可以在bind执行
		}
	})
	// 自定义全局按键修饰符
	Vue.config.keyCodes.f2 = 113
	var vm = new Vue({
		el:'#app',
		data:{
			curDate:new Date(),
			msg:'曾经，我也是一个单纯的少年，单纯的我，傻傻的问，谁是世界上最单纯的男人'
		},
		filters:{
			// 管理器调用的时候，采用的是就近原则，如果私有过滤器和全局过滤器名称一致了，这时候优先调用私有过滤器
			'dateFormat':function(dateStr, pattern=""){
				var dt = new Date(dateStr)
				return `${dt.getFullYear()}/${dt.getMonth()+1}/${dt.getDate()}----${Math.random()}`
			}
		},
		directives:{
			'fontweight':{
				bind:function(el, binding){
					el.style.fontWeight = binding.value
				}
			},
			// 在很多时候，你可能想在 bind 和 update 时触发相同行为，而不关心其它的钩子。
			// 注意 这个 function 等同于把 代码写到了 bind 和 update中去
			'fontsize':function(el, binding){
				el.style.fontSize = parseInt(binding.value) + 'px'
			}
		},
		methods:{
			setCurDate(){
				this.curDate = new Date()
			}
		}
	})
</script>
</body>
</html>